<template>
  <div class="water-container">
    <div class="chart" id="chart_right1"></div>
  </div>
</template>

<script>
export default {
  name: "waterConsumption",
  data() {
    return {
      timer: null,
      myChart: null,
    };
  },
  computed: {
    dataPageData() {
      return this.$store.state.dataPageData;
    },
  },
  watch: {
    dataPageData: {
      immediate: true,
      deep: true,
      handler(res) {
        if (res) {
          // 看数据格式再填入参数
          this.getEchart(res.xData, res.yData);
        }
      },
    },
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart(xdata, ydata) {
      if (this.myChart) {
        this.myChart.dispose();
        this.myChart = null;
      }
      this.myChart = echarts.init(document.getElementById("chart_right1"));

      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} (m^3)",
        },
        color: new echarts.graphic.LinearGradient(
          // (x1,y2) 点到点 (x2,y2) 之间进行渐变
          0,
          0,
          0,
          1,
          [
            { offset: 0, color: "#00fffb" }, // 0 起始颜色
            { offset: 1, color: "#0061ce" }, // 1 结束颜色
          ]
        ),
        grid: {
          left: "0%",
          right: "3%",
          bottom: "3%",
          top: "3%",
          //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
          containLabel: true,
          // 是否显示直角坐标系网格
          show: true,
          //grid 四条边框的颜色
          borderColor: "rgba(0, 240, 255, 0.3)",
        },
        xAxis: {
          type: "category",
          data: xdata || [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisLabel: {
            interval: 0,
          },
          axisTick: {
            alignWithLabel: false,
            // 把x轴的刻度隐藏起来
            show: false,
          },
          axisLabel: {
            color: "#4c9bfd",
          },
          // x轴这条线的颜色样式
          axisLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)",
              // width: 3
            },
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            alignWithLabel: false,
            // 把y轴的刻度隐藏起来
            show: false,
          },
          axisLabel: {
            color: "#4c9bfd",
          },
          // y轴这条线的颜色样式
          axisLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)",
              // width: 3
            },
          },
          // y轴分割线的颜色样式
          splitLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: "50%",
            data: ydata || [
              600, 900, 700, 560, 400, 900, 750, 600, 560, 400, 900,
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "top", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "#D1DBFF", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
          },
        ],
      };
      if (this.myChart) {
        this.myChart.clear();
        this.myChart.setOption(option, true);
      }
      // myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.water-container {
  .chart {
    height: 3rem;
  }
}
</style>